<template>
  <div>
    <cardTool>
      <!-- 顶部插槽 -->
      <template #headerDiy class="top">
        <el-row type="flex" justify="space-between">
          <el-button type="primary" size="small" @click="addFn">添加客户</el-button>
          <el-input v-model="text" placeholder="请输入客户名称" class="input-with-select">
            <el-select slot="prepend" v-model="select" placeholder="全部经纪人">
              <!-- <el-option>全部经纪人</el-option> -->
              <el-option
                v-for="item in broker"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
            <el-button slot="append" @click="search">筛选</el-button>
          </el-input>
        </el-row>
      </template>

      <!-- 表格插槽 -->
      <template #body>
        <!-- table表格 -->
        <el-table
          :header-cell-style="headerCellStyle"
          :cell-style="cellStyle"
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column prop="image" label="图片" width="180">
            <template v-slot="{ row }">
              <img v-imgErr="require('@/assets/nvren.jpg')" :src="row.image" alt="" class="imgs">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" width="180" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="phone" label="电话" />
          <el-table-column prop="agent.name" label="经纪" />
          <el-table-column prop="wechat" label="微信" />
          <el-table-column prop="desc" label="介绍" />
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button type="primary" size="small" @click="editFn(row.id)">编辑</el-button>
              <el-button
                type="danger"
                size="small"
                @click="edit(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="size"
            @current-change="change"
          />
        </el-row>
      </template>
    </cardTool>
    <!-- 弹窗组件 -->
    <diaLog
      ref="dialog"
      :is-show.sync="isShow"
      @updateList="getClient"
      @next="next"
    />
  </div>
</template>

<script>
import { getClientsList, editClient, getClientNum, getAgents } from '@/api/client'
import diaLog from './components/dialog.vue'
export default {
  components: { diaLog },
  data() {
    return {
      total: 0, // 客户总数量
      size: 3, // 每页显示的数量
      tableData: [], // 客户列表数据
      start: 0, // 从第几条数据开始获取
      limit: 3, // 每页的显示条数
      isShow: false, // 控制弹窗默认隐藏
      text: '', // 输入框内容
      select: '',
      broker: []
    }
  },
  created() {
    this.getClient()
    this.getNums()
    this.getAgentsList()
  },
  methods: {
    headerCellStyle() {
      return 'text-align:center'
    },
    cellStyle() {
      return 'text-align:center'
    },
    // 获取经纪人列表
    async getAgentsList() {
      const res = await getAgents()
      this.broker = res.data
      // console.log(this.broker)
    // console.log(85, res.data)
    },
    // 获取客户列表
    async getClient() {
      const res = await getClientsList({
        _limit: this.limit,
        _start: this.start
      })
      // console.log(109, res)
      this.tableData = res.data
      // console.log(112, this.select)
      await this.getNums()
    },
    // 删除客户
    edit(id) {
      // 弹出询问框
      this.$confirm('您确认删除吗', 'tips', {
        type: 'warning'
      }).then(async() => {
        // 调用接口
        await editClient(id)
        // 判断删除后当前页是否还有数据 如果数据返回上一页
        if (this.tableData.length === 1) {
          this.start = this.start - 6
          this.total--
        }
        // 获取最新列表数据 刷新页面
        this.getClient()
      }).catch((err) => {
        console.log(err)
      })
    },
    // 获取总数量
    async getNums() {
      const res = await getClientNum()
      // console.log(res)
      this.total = res.data.length
      // console.log(this.total)
    },
    // 分页器
    async change(page) {
      // console.log(page)
      this.start = page * this.limit - this.limit
      this.getClient()
    },
    // 点击添加客户
    addFn() {
      this.isShow = true
    },
    // 点击编辑客户信息
    async editFn(id) {
      console.log(id)
      // 显示弹窗
      this.isShow = true
      this.$refs.dialog.getClientByIds(id)
      // // 调用接口 获取指定客户信息
      // const res = await getClientById(id)
      // // 利用ref属性 实现数据回显
      // this.$refs.dialog.formData = res.data
    },
    // 点击搜索 筛选客户
    async search() {
      if (this.text) {
        const res = await getClientsList() // 客户列表数据
        const arr = res.data
        const val = this.text
        // console.log(val)
        // console.log(143, arr)
        // const newArr = arr.filter(v => v.name === val)
        const newArr = arr.filter(v => {
          if (v.name.indexOf(val) !== -1) {
            return true
          }
          return
        })
        // console.log(166, newArr)
        this.tableData = newArr
        this.total = newArr.length
        this.limit = newArr.length
        this.size = newArr.length
      }
    },
    // 确定新增事件 实现 单页面添加最后一条数据 自动页码+1
    next() {
      this.total++
      this.getClient()
    }
  }
}
</script>

<style lang='scss' scoped>
// 输入框
.input-with-select {
  margin-left: 20px;
  width: 800px;
  .el-select{
    width: 138px;
  }
}
// 分页器
.el-pagination {
  margin-top: 13px;
}
// 头像图片大小
.el-table {
  .imgs {
    width: 120px;
    height: 120px;
    display: block;
    margin: 0 auto;
  }
}
</style>
